<!doctype html>
<html>
    <head>

        <title>jsPlumb - chart demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="node_modules/@jsplumb/browser-ui/css/jsplumbtoolkit.css">
        <link rel="stylesheet" href="../demo.css">
    </head>
    <body>
    <!-- content -->
        <div class="jtk-demo-main">
            <div class="jtk-demo-canvas canvas-wide chart-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="window" id="chartWindow1">window one</div>
                <div class="window" id="chartWindow2">window two</div>
                <div class="window" id="chartWindow3">window three</div>
                <div class="window" id="chartWindow4">window four</div>
                <div class="window" id="chartWindow5">window five</div>
                <div class="window" id="chartWindow6">window six</div>
            </div>
            <div class="description">
                <h4>CHART</h4>
                <p>This is a simple demonstration of using jsPlumb to display hierarchical information.</p>
                <p>Connectors have a paintStyle of `gray` and specify an endpoint of radius 9.
                    Each connection has an Arrow overlay indicating direction, and paints itself orange on mouse hover.
                </p>
                <p>The Bezier curve used in this demo has a 'curviness' of 50</p>
            </div>
        </div>

        <!-- /content -->
        <script src="_build/demo.umd.js"></script>

    </body>
</html>
